<template>
	<div class="loginbox">
		<!--<div class="backimg">
			<img class="icon1" src="../../../static/img/bg1.png" alt="" />
		</div>-->
		<div class="content">
			<div class="login-top">
				<img src="../../../static/img/logo2.png" width="300px;" height="60px;" style="position:relative;top:-10px;left:-7px;" alt="" />
			</div>
			<!--<div style="width:592px;height:323px;background:url(../../../static/img/bg-sm.png) no-repeat;float:left;">&nbsp;</div>-->
			<div class="login">
				<div class="choice" style="width:334px; height:322px; overflow:hidden;">
					<div style="width:334px; height:50px; background:#e1e1e1; float:left;" id="selectBtn">
						<div class="current" @click="change(0)" id="title_0">前台登录</div>
						<div @click="change(1)" id="title_1">后台登录</div>
					</div>
					<div style="display:block;" id="show0">
						<div class="login-aside">
							<div class="fm-item yh">
								<input @keyup.enter="login" v-model="user.userName" placeholder="用户名 username" size="18" class="iptK" type="text">
								<span id="usernameError" style="display:none;" class="auth_error1_new">请输入用户名</span>
							</div>
							<div class="fm-item mm">
								<input v-model="user.password" @keyup.enter="login" placeholder="密码 password" class="iptK" type="password" autocomplete="off">
								<span id="passwordError" style="display:none;" class="auth_error1_new">请输入密码</span>
							</div>
							<div class="fm-item-yzm" style="display:none;"> </div>
							<div class="fm-item" style="border:#2F98CF 1px solid !important;">
								<button class="btn-login" @click="login">登&nbsp;&nbsp;录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottomlink">
			<p style="width: 100%;height: 45px;line-height: 45px;text-align: center;font-family: '宋体';font-size: 13px;color: #000;text-shadow: 1px 1px 0px rgba(0,0,0,0.15);z-index: 900000;">
				版权所有© 成都国际铁路港管委会 | 地址: 成都市青白江区 | 邮编: 610300 | 成都信息工程大学物流研究院提供技术支持
			</p>
		</div>
	</div>
</template>
<script>
	import home from '../home/home'

	import {
		routers
	} from '../../router/index.js'
	
	export default {
		name: 'hello',
		data() {
			return {
				user: {
					userName: null, //账号
					password: null, //密码
					grant_type: "password",
					isLoading: false
				},
				AssmmenuList: [],
				role: 0 //0代表前台登录，1代表后台登录
			}
		},
		methods: {
			change(index) {
				if(index == 1) {
					document.getElementById("title_0").className = "";
					document.getElementById("title_1").className = "current";
					this.role = 1;
				} else {
					document.getElementById("title_1").className = "";
					document.getElementById("title_0").className = "current";
					this.role = 0;
				}
			},
			async login() {
				if(this.user.userName == null || this.user.userName == '') {
					this.$message.error('请输入账号');
					return;
				}
				if(this.user.password == null || this.user.password == '') {
					this.$message.error('请输入密码');
					return;
				}

				this.ajaxLogin({ //统计
					url: 'tSysUser/login',
					type: 'post',
					data: this.user,
					timeout: 5000,
				}).then(userData => {
					this.setItem('userData', userData);

					/*获取token*/
					$.ajax({
						url: this.CommonUrl + 'tSysUser/token',
						type: 'post',
						data: this.user,
						success: toeknData => {
							this.setItem('logindata', toeknData);
							this.setItem('token', toeknData.token);
							if(this.role == 0) {
								this.$router.push({
									path: "/map"
								});
								return false;
							}
							if(userData.isSuper == 1) {
								this.$router.options.routes = routers;
								this.$router.replace('system/staff')
								this.$message({
									message: '登录成功',
									type: 'success'
								});
							} else {
								this.ajax({
									url: "tSysUser/selectUserMenus",
									data: {
										id: userData.id
									},
									success: data => {
										this.AssmmenuList = [];
										/*登录页面的路由信息默认加入*/
										this.AssmmenuList.push(this.$router.options.routes[0]);
										/*加入配置路由信息*/
										this.SetAssemMenuList(data, this.AssmmenuList);
										console.log(this.AssmmenuList)
										/*替换默认的路由信息*/
										this.$router.options.routes = this.AssmmenuList;
										/*保存菜单，页面刷新的时候还是显示对应角色能够看到的页面*/
										this.setItem('routers', data);

										if(!data.length) { //如果没有配置角色
											this.$message({
												message: '警告, 您还没有权限！请联系管理员配置角色！',
												type: 'warning'
											});
										} else if(data[0].children && data[0].children.length > 0) {
											if(data[0].children[0].children.length) { //默认走菜单的第一个路径
												/*增加页面重定向*/
												this.AssmmenuList.push({
													path: '*',
													hiddenMenu: true, //隐藏菜单栏
													redirect: data[0].children[0].children[0].url
												})
												this.$router.push(data[0].children[0].children[0].url);
											} else {
												/*增加页面重定向*/
												this.AssmmenuList.push({
													path: '*',
													hiddenMenu: true, //隐藏菜单栏
													redirect: data[0].children[0].url
												})
												this.$router.push(data[0].children[0].url);

												console.log(data[0].children[0].url)
											}
											this.$router.replace(data[0].url + '/' + data[0].children[0].url)
											this.$message({
												message: '登录成功',
												type: 'success'
											});
										}
									}
								});
							}

						}
					})
				})
			},
			SetAssemMenuList(data, menuList) {
				var list = [];
				//拼装菜单
				for(var item of data) {
					//var menuData = item.attributes.data;

					let menuItem = {
						path: item.url,
						meta: {
							showName: item.name
						},
						//level: (menuData.level - 1),
						ico: item.icon,
						component: home,
					}
					menuItem.children = [];
					if(item.children != undefined) {
						this.SetMenuChildren(item.children, menuItem);
					} else {
						menuItem.meta.onlyOne = true
					}
					menuList.push(menuItem);
				}

			},
			SetMenuChildren(children, menuList) {
				if(children.length > 0) {
					for(var item of children) {
						//var menuData = item;
						let menuItem = {
							path: item.url,
							meta: {
								showName: item.name
							},
							//ico: menuData.icon,
							component: resolve => {
								require([item.pathUrl], resolve)
							},
						}
						if(menuItem.children == undefined) {
							if(item.children != undefined) {
								if(item.children.length > 0) {
									menuItem.children = [];
								}
							}
						}
						menuList.children.push(menuItem);
						if(item.children != undefined) {
							this.SetMenuChildren(item.children, menuItem);
						}
					}

				}
			}
		}
	}
</script>
<style scoped lang="less">
	body,
	div,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	form,
	input {
		margin: 0;
		padding: 0;
	}
	
	html,
	body {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.loginbox {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: #e6e6e6;
		position: absolute;
		background: url(../../../static/img/bg1.png) no-repeat 100% 100%;
		background-size: 100% 100%;
		/*opacity: 0.5;*/
	}
	
	.content {
		width: 334px;
		margin: 7% auto;
		padding: 0;
		font-family: "microsoft yahei";
		font-size: 13px;
		color: #676A6C;
	}
	
	.auth_input {
		border: 1px solid #009cff;
		height: 30px;
		padding: 1px 0;
		font-size: 14px;
		width: 209px;
		margin: 0;
		color: #676a6c;
		outline: none;
	}
	
	.auth_login_btn {
		color: #fff;
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		border-radius: 3px;
		text-decoration: none;
		border: 1px solid transparent;
		width: 100%;
	}
	
	.login {
		width: 334px;
		height: 323px;
		background: #fff;
		z-index: 1000;
		position: relative;
		right: 0;
		top: 0;
		float: left;
	}
	
	#selectBtn div {
		display: block;
		float: left;
		font-size: 16px;
		line-height: 50px;
		height: 50px;
		font-weight: normal;
		width: 167px;
		background: #bebebe;
		cursor: pointer;
		text-align: center;
		color: #fff;
	}
	
	#selectBtn div.current {
		background: #fbfbfb;
		color: #009cff;
	}
	
	#show0 {
		float: left;
		width: 348px;
		height: 256px;
	}
	
	.login-aside {
		float: left;
		width: 288px;
		height: 243px;
		margin: 30px 0 0 27px;
	}
	
	.fm-item {
		float: left;
		width: 286px;
		height: 30px;
		border: #009cff 1px solid;
		background: #fff;
		margin-bottom: 20px;
		position: relative;
	}
	
	.yh {
		background: url(../../../static/img/ico-log.png) no-repeat 6px 6px;
	}
	
	.iptK {
		width: 254px;
		height: 27px;
		line-height: 27px;
		padding: 1px 0;
		border: none;
		outline: none;
		color: #676a6c;
		text-indent: 5px;
		margin-left: 30px;
	}
	
	.auth_error1_new {
		position: relative;
		width: 240px !important;
		height: 20px;
		line-height: 20px;
		color: #ED5565;
		font-size: 12px;
		top: 0 !important;
	}
	
	.mm {
		background: url(../../../static/img/ico-log.png) no-repeat 6px -16px;
	}
	
	.fm-item-yzm {
		float: left;
		width: 286px;
		height: 30px;
		background: #fff;
		margin-bottom: 20px;
		position: relative;
	}
	
	.btn-login {
		float: left;
		width: 288px;
		height: 30px;
		line-height: 30px;
		background: #2F98CF;
		font-size: 18px;
		color: #fff;
		border: none;
		cursor: pointer;
	}
	
	.auth_icon {
		background-color: rgb(242, 242, 242);
		border: 1px solid #009cff;
		border-right: none;
		width: 32px;
		height: 32px;
		float: left;
	}
	
	.auth_icon_bar {
		background: url(../../../static/img/icons.png) -43px -73px no-repeat;
	}
	
	.warning_new {
		color: #009cff;
		text-decoration: underline;
	}
	
	.dynamicCode {
		width: 90px;
		padding: 6px 8px;
		margin-top: 0px;
		cursor: pointer;
		font-family: "microsoft yahei";
	}
	
	.abs_right {
		position: absolute;
		right: 12px;
	}
	
	.auth_error2_new {
		position: relative;
		float: left;
		width: 240px !important;
		height: 20px;
		line-height: 20px;
		color: #ED5565;
		font-size: 12px;
		top: 0 !important;
	}
	
	.fm-item-dtm {
		margin-bottom: 20px;
	}
	
	.bottomlink {
		position: fixed;
		left: 0px;
		bottom: 0;
		width: 100%;
		height: 54px;
		z-index: 999;
	}
	
	.backimg {
		position: fixed;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		z-index: -1;
		background-size: cover;
		opacity: 0.4;
	}
	
	.backimg img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		min-width: 50%;
		min-height: 50%;
	}
</style>